/**
 * Created by xiongisxiong on 2018/4/27
 * Edited on 5/16
 */
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

import { Avatar, TextTool, Separator, MenuRow } from '../widgets'
import { screen, color } from '../utils'

const { H3, Normal, Tip }  = TextTool;

export default class Account extends PureComponent {
  static navigationOptions = ({navigation}) => ({
    headerTitle: <H3 color='#fff'>账号</H3>,
    headerRight: <TouchableOpacity onPress={() => navigation.navigate('Player', {title: '播放器'})}><Icon name='signal' size={30} color='#fff'/></TouchableOpacity>,
    headerStyle: {
      backgroundColor: color.theme,
      paddingRight: 10,
      paddingLeft: 10,
    }
  })
  render() {
    return (
      <ScrollView style={styles.container}>

        <View style={{height: screen.width / 4, width: screen.width, flexDirection: 'row', alignItems: 'center', paddingLeft: 10, paddingRight: 10, backgroundColor: '#fff'}}>

          <Avatar />

          <View style={{marginLeft: 10}}>
            <Normal style={{fontSize: 14}} title='xiongisxiong'/>
            <Tip>VIP10</Tip>
          </View>

          <View style={{flex: 1}}></View>

          <TouchableOpacity style={{borderWidth: screen.onePixel, borderRadius: 20,padding: 5,paddingLeft: 10,paddingRight:10}}><Normal>已签到</Normal></TouchableOpacity>

        </View>

        <Separator />

        <View style={{height: screen.width / 8, width: screen.width, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', backgroundColor: '#fff'}}>
            <View style={{width: '25%', height: '60%', borderRightWidth: screen.onePixel, borderColor: color.border, alignItems: 'center'}}>
              <Tip>动态</Tip>
              <Normal>10</Normal>
            </View>

            <View style={{width: '25%', height: '60%', borderRightWidth: screen.onePixel, borderColor: color.border, alignItems: 'center'}}>
              <Tip>动态</Tip>
              <Normal>10</Normal>
            </View>

            <View style={{width: '25%', height: '60%', borderRightWidth: screen.onePixel, borderColor: color.border, alignItems: 'center'}}>
              <Tip>动态</Tip>
              <Normal>10</Normal>
            </View>

            <View style={{width: '25%', height: '60%', alignItems: 'center'}}>
              <Icon name='lead-pencil' size={15} />
              <Tip>我的资料</Tip>
            </View>
        </View>

        <View style={{height: 10}}></View>

        <View style={{backgroundColor: '#fff'}}>
            <MenuRow leftIconName='email-outline' title='我的消息' border={false} rightIcon/>
        </View>

        <View style={{height: 10}}></View>

        <View style={{backgroundColor: '#fff'}}>
            <MenuRow leftIconName='diamond' title='会员中心' border rightIcon/>
            <MenuRow leftIconName='cart-outline' title='商城' border rightIcon/>
            <MenuRow leftIconName='headphones-box' title='在线听歌免流量' border={false} rightIcon/>
        </View>

        <View style={{height: 10}} />

        <View style={{backgroundColor: '#fff'}}>
            <MenuRow leftIconName='settings' title='设置' border rightIcon/>
            <MenuRow leftIconName='qrcode-scan' title='扫一扫' border rightIcon/>
            <MenuRow leftIconName='all-inclusive' title='个性换肤' border rightIcon/>
            <MenuRow leftIconName='lightbulb-outline' title='夜间模式' border rightIcon/>
            <MenuRow leftIconName='clock' title='定时开关' border={false} rightIcon/>
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
      backgroundColor: '#EEEFF1',
      flex: 1
  }
});